<template>
    <div id="app">
        <a-modal v-model:visible="visable" :mask-closable="false" :footer="false" title="回复" :width="500"
            @cancel="close">
            <a-form ref="appFrom" :model="formData" :rules="formRule" :label-col-props="{ span: 6 }" layout="vertical">
                <a-row :gutter="8" v-if="data">
                    <a-col :span="12">
                        <a-form-item label="反馈人" label-position="top">
                            <a-input v-model="data.name" readonly></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="12">
                        <a-form-item label="手机号" label-position="top">
                            <a-input v-model="data.phone" readonly></a-input>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="8" v-if="data">
                    <a-col :span="24">
                        <a-form-item label="反馈内容" label-position="top" field="title">
                            <a-textarea v-model="data.content" disabled error/>
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row :gutter="8">
                    <a-col :span="24">
                        <a-form-item label="回复内容" label-position="top" field="replayContent">
                            <a-textarea v-model="formData.replayContent" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <div class="demo-drawer-footer">
                <a-button shape="circle" style="margin-right: 8px" @click="close">取消</a-button>
                <a-button shape="circle" type="primary" @click="doSubmit">确认回复</a-button>
            </div>
            <!-- <a-spin :size="large" fix v-if="loading" /> -->
        </a-modal>
    </div>
</template>

<script lang="ts">
import { onBeforeMount, ref } from 'vue';
import utils from '@/utils/utils';
import request from '@/config/request';
export default {
    setup(props, { emit }) {
        const visable = ref(false);
        const loading = ref(false);
        const data = ref({
            id:ref(),
            name:ref(),
            phone:ref(),
            content:ref(),
            replay:ref(),
        });
        const appFrom = ref();
        const formData = ref({
            replayContent: ref(''),
        });
        const formRule = ref({
            replayContent: [
                { required: true, message: '请输入回复内容' }
            ]
        });
        const show = (form: any) => {
            visable.value = true;
            appFrom.value.resetFields();
            data.value = JSON.parse(JSON.stringify(form));
            if (data.value.replay != '') {
                formData.value.replayContent = data.value.replay;
            }
        };
        const close =()=>{
            visable.value = false;
            emit('close');
        };
        const doSubmit=()=>{
            appFrom.value.validate((valid: any) => {
                if (valid) {
                    utils.loading();
                    request.get('/platform/feedback/replay/' + data.value.id,formData.value).then((ret:any) => {
                        // console.log(ret)
                        if (ret.code == 200) {
                            utils.success('操作成功！').then(() => {
                                appFrom.value.resetFields();
                                visable.value= false;
                                emit('success');
                            })
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }
            })
        }
        return {visable,loading,data,appFrom,formData,formRule,show,close,doSubmit}
    },

}
</script>

<style scoped>
.demo-drawer-footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
</style>
